<template>
  <px-card shadow="never">
    <px-form class="custom-form-ui-new tool-form" :model="queryParams" inline label-position="right" label-width="120px">
      <px-form-item label="设备总称">
        <px-select v-model="queryParams.toolCategory" placeholder="请选择设备总称">
          <px-option v-for="item in machineList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="设备名称">
        <px-select v-model="queryParams.className" placeholder="请选择设备名称">
          <px-option v-for="item in fabList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="抄表日期">
        <px-date-picker
          v-model="queryParams.time"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </px-form-item>
      <px-form-item>
        <px-button type="primary" @click="queryTable">搜索</px-button>
        <px-button @click="resetTable">重置</px-button>
      </px-form-item>
    </px-form>
    <px-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <px-table-column prop="name" label="设备名称" width="180" />
      <px-table-column prop="project" label="项目" />
      <px-table-column prop="value" label="瞬时值" />
      <px-table-column prop="date" label="抄表日期" />
      <px-table-column prop="time" label="抄表时间" />
      <px-table-column align="center" label="操作" width="120">
        <template #default="scope">
          <px-tooltip placement="top" content="历史曲线">
            <px-button link type="primary" icon="ModelingHistory" size="small" @click.prevent="handleChart(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <!-- 报废弹窗 -->
    <ChartDialog :visible="dialogVisible" @closeDialog="closeDialog" @queryTable="queryTable" />
  </px-card>
</template>
<script setup lang="ts">
import { reactive, toRefs } from "vue";
import ChartDialog from "./components/ChartDialog.vue";
const state = reactive<any>({
  queryParams: {},
  dialogVisible: false
});
const { queryParams, dialogVisible } = toRefs(state);
const machineList = [
  {
    value: 1,
    label: "压力表"
  },
  {
    value: 2,
    label: "流量计"
  },
  {
    value: 3,
    label: "分析仪"
  }
];

const fabList = [
  {
    value: 1,
    label: "N2分析仪"
  },
  {
    value: 2,
    label: "H2分析仪"
  },
  {
    value: 3,
    label: "HE分析仪"
  }
];

const tableData = [
  {
    name: "N2分析仪",
    project: "N2中颗粒分析",
    value: "234",
    date: "2024-05-16",
    time: "10:00"
  },
  {
    name: "N2分析仪",
    project: "N2中水分析",
    value: "165",
    date: "2024-05-16",
    time: "12:00"
  },
  {
    name: "H2分析仪",
    project: "N2中颗粒分析",
    value: "324",
    date: "2024-05-16",
    time: "8:00"
  },
  {
    name: "H2分析仪",
    project: "N2中水分析",
    value: "621",
    date: "2024-05-26",
    time: "22:00"
  },
  {
    name: "HE分析仪",
    project: "HE中颗粒分析",
    value: "539",
    date: "2024-05-26",
    time: "20:00"
  }
];

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

const handleChart = row => {
  console.log("show");
  dialogVisible.value = true;
};

const queryTable = () => {};
const resetTable = () => {};

const closeDialog = () => {
  dialogVisible.value = false;
};
</script>
